import Vue from 'vue';
import $ from 'jquery';
import moment from 'moment' //引入js日期处理类库
// 时间选择器 - 输入格式转换
Vue.directive('dateFormat', {
    inserted: function (el, binding, vnode) {
        // 解构赋值+别名  _obj: 父组件传过来的参数  例如: v-date-format="{obj:'forms.time', index: 1,modelName:'date1'}"
        const { value: _obj } = binding
        // _this: 父组件的data,
        const { context: _this, data } = vnode
        // key: 组件v-model绑定的变量名
        const { expression: key } = data.model
        let arr = []

        if (_this && _this._isVue) {
            const $this = $($(el).children('input')[0])
            const $this2 = $($(el).children('input')[1])
            // 判断是范围的还是单个独立的日期时间控件，范围的两个输入框都要绑定change事件
            if ($(el).children('input').length > 1) {
                $this.on('change', function () {
                    let value = $this.val()
                    modelValue(value, 2);
                    // 解决只改变开始时间,结束时间数据丢失
                    $this2.val() ? modelValue($this2.val(), 2) : ''
                })
                $this2.on('change', function () {
                    let value = $this2.val()
                    // 解决只改变结束时间,开始时间数据丢失
                    $this.val() ? modelValue($this.val(), 2) : ''
                    modelValue(value, 2);
                })
            } else {
                $this.on('change', function () {
                    let value = $this.val()
                    modelValue(value, 1);
                })
            }
        }

        //   value: 输入的值   len: 1(一个输入框)   2(范围选择,两个输入框)
        const modelValue = function (value, len) {
            // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
            if (value.length == 4 || value.length == 5) {
                value = value.replace(/^(\d{1,2})\D*(\d{1,2})\D*/, '$1:$2') // 格式化输入格式, 12:00 || 1200
            } else if (value.length == 8 || value.length == 10) {
                value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式,2021-03-01 || 20210301
            } else if (value.length == 12 || value.length == 16) {
                value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3 $4:$5') // 格式化输入格式,2021-03-01 09:50 || 202103010950
            } else if (value.length == 14 || value.length == 19) {
                value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3 $4:$5:$6') // 格式化输入格式,2020-03-01 09:50:30
            } else {
                return false
            }
            // const time = value && value.constructor == String ? moment(value) : value  // 转换时间格式
            const time = value  // 转换时间格式
            let keys = key.split('.')
            console.log("🚀 ~ file: dateFormat.js ~ line 59 ~ modelValue ~ keys", keys)
            if (arr.length === len) {
                arr = [];
            }
            arr.push(time)
            // 判断指令是否有传值，是否有传数组的名称跟索引值，原因：转换出来的时间控件_this[key1][key2]取不到绑定的相关值
            if (!_obj) {
                // 处理简单的绑定
                if (keys && keys.length >= 2) {
                    const [key1, key2, key3, key4] = keys
                    if (key4) {
                        _this[key1][key2][key3][key4] = len === 2 ? arr : time;
                    } else if (key3) {
                        _this[key1][key2][key3] = len === 2 ? arr : time;
                    } else {
                        _this[key1][key2] = len === 2 ? arr : time;
                    }
                } else {
                    _this[key] = len === 2 ? arr : time;
                }
            } else {
                // 处理循环中的时间控件绑定，需要传值，再去相应的数组中查找相应的字段赋值
                let objKey = _obj.obj.split('.')
                if (objKey && objKey.length > 2) {
                    // 解构赋值
                    const [flag1, flag2, flag3, flag4] = objKey;
                    // _obj.index：索引，_obj.modelName：绑定的字段名
                    if (flag4) {
                        // 例如: 这样子传参   v-date-format="{obj:'forms.time', index: 1,modelName:'date1'}"
                        _this[flag1][flag2][flag3][flag4][_obj.index][_obj.modelName] = len === 2 ? arr : time;
                        // 给v-model绑定的变量赋值
                        _this[keys[0]][keys[1]] = len === 2 ? arr : time;
                    } else if (flag3) {
                        _this[flag1][flag2][flag3][_obj.index][_obj.modelName] = len === 2 ? arr : time;
                        // 给v-model绑定的变量赋值
                        _this[keys[0]][keys[1]] = len === 2 ? arr : time;
                    } else {
                        _this[flag1][flag2][_obj.index][_obj.modelName] = len === 2 ? arr : time;
                        // 给v-model绑定的变量赋值
                        _this[keys[0]][keys[1]] = len === 2 ? arr : time;
                    }
                } else if(objKey && objKey.length == 1){
                    // 例如: 这样子传参   v-date-format="{obj:'time2'}"
                    _this[objKey[0]] = len === 2 ? arr : time;
                    // 给v-model绑定的变量赋值
                    _this[keys[0]][keys[1]] = len === 2 ? arr : time;
                } else if(objKey && objKey.length == 2){
                    // 例如: 这样子传参   v-date-format="{obj:'forms.time'}"
                    _this[objKey[0]][objKey[1]] = len === 2 ? arr : time;
                    // 给v-model绑定的变量赋值
                    _this[keys[0]][keys[1]] = len === 2 ? arr : time;
                }
            }
        };
    }
})